<template>
  <div>
    <div class="home" @click="btnClickStyle" v-show="pageFlag">
      <h1>
        <!-- TODO: 留出空位放校徽 src/assets/imgs文件下放入图片替换路径就行-->
        <img class="logo" src="../../assets/imgs/logo.jpg" alt="" />
        <div ref="titleRef">
          <span class="zh_desc">低压配电系统户变关系与用户相位辨识平台</span>
          <div class="en_desc">
            User Transformer Relationship and User Phase Identification Platform
            for Low Voltage Distribution Systems
          </div>
        </div>
      </h1>
      <div class="auther">展示人: XXXXXXX大学, XXXXXXXXXXXXX</div>
    </div>
    <div class="copy_home" v-show="!pageFlag">
      <h2>
        <!-- TODO: 留出空位放校徽 src/assets/imgs文件下放入图片替换路径就行-->
        <img class="logo" src="../../assets/imgs/logo.jpg" alt="" />
        <div ref="titleRef">
          <span class="zh_desc">低压配电系统户变关系与用户相位辨识平台</span>
        </div>
      </h2>
      <div class="home-des-top">
        针对目前户变关系与用户相位信息错误导致线损计算不准确，三相不平衡治理效果不佳的问题，本软件采用了一种基于过滤搜索和CFSFDP聚类算法的户变关系和用户相位识别方法对用户电压数据集进行拓扑识别，最终输出不属于本台区的户号以及属于本台区的户号的相位。
      </div>
      <br />
      <div class="home-des-bottom">
        该软件采用基于django库的用户界面设计，为用户提供了易于使用，功能全面的用户界面，通过用户上传的Excel文件进行分析，采用可视化模型呈现过滤搜索过程和聚类分析过程，最终区分出异常用户、正常用户，并给出正常用户的相位，实现异常信号诊断与用户相位识别功能。该软件采用xxx的用户界面设计，为用户提供了易于使用，功能全面的用户界面，通过用户上传的Excel文件进行分析，采用可视化模型呈现过滤搜索过程和聚类分析过程，最终区分出异常用户、正常用户，并给出正常用户的相位。
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const pageFlag = ref(true);
const btnClickStyle = () => {
  pageFlag.value = false;
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.home {
  font-size: 20px;
  padding: 2% 4%;
  letter-spacing: 6px;
  color: white;
  margin-top: 260px;
  h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    .logo {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    div {
      .zh_desc {
        font-size: 70px;
      }
      .en_desc {
        letter-spacing: 0;
        font-size: 24px;
      }
    }
  }
  h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    .logo {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    div {
      .zh_desc {
        font-size: 48px;
      }
      .en_desc {
        letter-spacing: 0;
        font-size: 24px;
      }
    }
  }
  .auther {
    margin-top: 80px;
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
  .home-des-top {
    font-size: 30px;
    text-indent: 50px;
  }
  .home-des-bottom {
    font-size: 30px;
    text-indent: 50px;
  }
  .home-make {
    font-weight: bold;
  }
  .home-version {
    font-weight: bold;
  }
}
.copy_home {
  font-size: 20px;
  padding: 2% 4%;
  letter-spacing: 6px;
  color: white;
  margin-top: 100px;

  h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    .logo {
      width: 60px;
      height: 60px;
      margin-right: 20px;
    }
    div {
      .zh_desc {
        font-size: 48px;
      }
      .en_desc {
        letter-spacing: 0;
        font-size: 24px;
      }
    }
  }
  .auther {
    margin-top: 80px;
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
  .home-des-top {
    font-size: 30px;
    text-indent: 50px;
  }
  .home-des-bottom {
    font-size: 30px;
    text-indent: 50px;
  }
  .home-make {
    font-weight: bold;
  }
  .home-version {
    font-weight: bold;
  }
}
</style>
